<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>如风壁纸 - 详情</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body class="detail-page">
    <header class="detail-header">
        <button id="back-btn" class="back-btn">
            <i class="ri-arrow-left-line"></i>
        </button>
        <div class="detail-actions">
            <button id="favorite-btn" class="action-btn">
                <i class="ri-heart-line"></i>
            </button>
            <button id="download-btn" class="action-btn">
                <i class="ri-download-line"></i>
            </button>
        </div>
    </header>
    
    <main class="container">
        <div id="wallpaper-detail" class="wallpaper-detail">
            <div class="loading-spinner">
                <div class="spinner"></div>
                <p>加载中...</p>
            </div>
        </div>
        
        <div class="wallpaper-info hidden" id="wallpaper-info">
            <h2 class="wallpaper-title" id="wallpaper-title"></h2>
            <p class="wallpaper-description" id="wallpaper-description"></p>
            
            <div class="info-section">
                <div class="info-item">
                    <span class="label">分类</span>
                    <span class="value" id="wallpaper-category"></span>
                </div>
                <div class="info-item">
                    <span class="label">分辨率</span>
                    <span class="value" id="wallpaper-resolution"></span>
                </div>
                <div class="info-item">
                    <span class="label">下载</span>
                    <span class="value" id="wallpaper-downloads"></span>
                </div>
            </div>
            
            <div class="tags-section">
                <h3>标签</h3>
                <div class="tags-container" id="wallpaper-tags"></div>
            </div>
            
            <div class="related-section">
                <h3>相关壁纸</h3>
                <div class="related-wallpapers" id="related-wallpapers"></div>
            </div>
        </div>
    </main>
    
    <nav class="bottom-nav">
        <a href="index.html" class="nav-item">
            <i class="ri-home-line"></i>
            <span>首页</span>
        </a>
        <a href="categories.html" class="nav-item">
            <i class="ri-grid-line"></i>
            <span>分类</span>
        </a>
        <a href="favorites.html" class="nav-item">
            <i class="ri-heart-line"></i>
            <span>收藏</span>
        </a>
        <a href="upload.html" class="nav-item">
            <i class="ri-upload-line"></i>
            <span>上传</span>
        </a>
    </nav>
    
    <script src="js/api.js"></script>
    <script src="js/storage.js"></script>
    <script src="js/detail.js"></script>
</body>
</html> 